<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="/shop/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/confirm.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loading.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/shop/js/rem.js"></script>
    <script src="/shop/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script type="text/javascript">
        sessionStorage.url = "confirm";
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300);

            // 获取用户信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            $("#userInfo").html("收货人：" + user.nickName + "&nbsp;&nbsp;&nbsp;&nbsp;" + user.email);


            // 获取下单商品信息
            var data = JSON.parse(sessionStorage.getItem("carts"));
            // 渲染下单商品信息
            $("#big").renderValues({list:data});

            // 获取商品总兑换积分
            var totalPoints = JSON.parse(sessionStorage.getItem("totalPoints"));
            $(".totalPoints").html(parseInt(totalPoints) + "积分");

        });

        // 下单
        function order() {
            var user = JSON.parse(sessionStorage.getItem("user"));
            // 获取商品总兑换积分
            var totalPoints = JSON.parse(sessionStorage.getItem("totalPoints"));
            // 下单之前发送请求查询用户的积分
            $.get("/users/" +user.id+"/points", function (data) {
                if (data < totalPoints){
                    $(document).dialog({
                        overlayClose: true,
                        content: '积分不足, 无法兑换商品'
                    });
                } else {
                    // 发送请求保存用户订单信息
                    // 数据 1. 商品id, 2. 用户id, 3. 所需积分 4.
                    // 获取下单商品信息
                    var data = JSON.parse(sessionStorage.getItem("carts"));
                    var order = data[0];
                    
                    $.ajax({
                        url:"/orders",
                        type:"POST",
                        data:{userId:user.id, productId:order.productId, points:totalPoints},
                        success:function () {
                            window.location.href = "/mine/zhifu.html";
                        }
                    });
                }
            })
        }



    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <div class="top-sch-box top-sch-boxtwo flex-col">
        确认订单
    </div>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="confirm clearfloat">
        <div class="add clearfloat box-s">
            <a href="address.html">
                <div class="left clearfloat fl">
                    <i class="iconfont icon-dizhi1"></i>
                </div>
                <div class="middle clearfloat fl">
                    <p class="tit" id="userInfo">

                    </p>
                    <p class="fu-tit over2">
                        收货地址：湖南省长沙市高新区拓基城市广场金座A2002
                    </p>
                </div>
                <div class="left clearfloat fr">
                    <i class="iconfont icon-jiantou1"></i>
                </div>
            </a>
        </div>
        <div id="big">
            <div render-loop="list">
                <div class="lie clearfloat">
                    <a href="detail.html">
                        <div class="tu clearfloat fl">
                            <img src="images/xj.jpg" render-src="list.coverUrl"/>
                        </div>
                    </a>
                    <div class="right clearfloat fl">
                        <a href="detail.html">
                            <p class="tit over" render-html="list.productName"></p>
                        </a>
                        <div class="xia clearfloat">
                            <a href="detail.html">
                                <p class="jifen fl over" render-html="list.points">100000</p>
                            </a>
                            <span class="fr db" render-html="list.count"></span>
                        </div>
                    </div>
                </div>
                <div class="gmshu clearfloat box-s fl">
                    <div class="gcontent clearfloat">
                        <p class="fl">购买数量</p>
                        <div class="you clearfloat fr">
                            <ul>
                                <li><img src="/shop/images/jian.jpg"/></li>
                                <li render-html="list.count">1</li>
                                <li><img src="/shop/images/jia.jpg"/></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gmshu gmshutwo clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">配送方式</p>
                <div class="you clearfloat fr">
                    <span>快递 免邮</span>
                    <i class="iconfont icon-jiantou1"></i>
                </div>
            </div>
        </div>
        <div class="gmshu gmshutwo clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">发票信息</p>
                <div class="you clearfloat fr">
                    <div class="xuan clearfloat">
                        <div class="radiotwo">
                            <label>
                                <input type="radio" name="fapiao" value="" checked/>
                                <div class="option"></div>
                                <span class="opt-text">需要发票</span>
                            </label>
                        </div>
                    </div>
                    <div class="xuan clearfloat">
                        <div class="radiotwo">
                            <label>
                                <input type="radio" name="fapiao" value=""/>
                                <div class="option"></div>
                                <span class="opt-text">不需要发票</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gmshu gmshuthree clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">买家留言</p>
                <div class="you clearfloat fl">
                    <input type="text" name="" id="" value="" class="text" placeholder="选填 对本次交易需求给商家留言"/>
                </div>
            </div>
        </div>
        <div class="gmshu clearfloat box-s fl">
            <p class="fr">共1件商品 合计<samp class="totalPoints">100000积分</samp></p>
        </div>

    </div>
</div>

<!--settlement star-->
<div class="settlement clearfloat">
    <div class="zuo clearfloat fl box-s">
        <p class="fr">共1件商品 合计<samp class="totalPoints">100000积分</samp></p>
        <!--共<span>1</span>件 总积分：<span>100000</span>-->
    </div>
    <a role="button" onclick="order()" class="fl db">
        提交订单
    </a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="index.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li class="active">
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>

</html>
